<template>
	<div class="nav">
		<swiper :options="swiperOption">
		    <!-- slides -->
		    <swiper-slide>
		    	<div class="pages"  v-for='item in arr'>
		    		<img :src="item.imgUrl">
		    		<p>{{item.title}}</p>
		    	</div>
	   		</swiper-slide>
	   		<swiper-slide>
		    	<div class="pages"  v-for='item in arr2'>
		    		<img :src="item.imgUrl">
		    		<p>{{item.title}}</p>
		    	</div>
	   		</swiper-slide>
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		 </swiper>
	</div>
</template>
<script>
	export default{
		props:[
			'navList',
		],
		data() {
		  return {
		  	navItem:'',
		  	arr:[],
		  	arr2:[],
		    swiperOption: {
		    	pagination: {
		            el: '.swiper-pagination'
		        },
		    }
		  }
		},
		watch:{
			navList:function(navItem){
				// console.log(iconfontItem)
				this.arr = []
				this.arr2 = []
				this.navList1=navItem;
				this.navList1.forEach((item,index)=>{
					if(index/8<1){
						this.arr.push(this.navList1[index])
					}else{
						this.arr2.push(this.navList1[index])
					}
				})
			}
		}
	}
</script>
<style lang='stylus' scoped>
	*{
		touch-action: pan-y;
	}
	.pages{
		width: 25%;
		float: left;
		text-align: center;
		margin-top: 8px;
		img{
			width: 60%;
		}
		p{
			font-size: .373rem;
			color: #212121;
			margin-top: 3px;
		}
	}
	.swiper-pagination-bullets{
		bottom: 2px;
	}
</style>